<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>堆快照监控内存</title>
</head>
<body>
  <button id="btn">Add</button>
  <script>
    // 创建大量dom，有变量引用这些dom，但是没有在界面上做呈现，这就是分离dom
    var tmpEle

    function fn() {
      var ul = document.createElement('ul')
      for (var i = 0; i< 10; i++) {
        var li = document.createElement('li')
        ul.appendChild(li)
      }
      tmpEle = ul

      // 防止内存泄漏，当我们确定某个变量后面不需要再用到时，要做一个清空的操作
      tmpEle = null
    }
    document.getElementById('btn').addEventListener('click', fn)
  </script>
</body>
</html>
